<template>
  <div>
    <Table border ref="selection" :columns="columnsList" :data="list" :height="height"
    @on-selection-change="handleSelection"></Table>
  </div>
</template>

<script>
export default {
  props: {
    columns: {
      type: Array,
      default: () => {
        return [];
      }
    },
    tableData: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      columnsList: this.columns,
      list: this.tableData,
      height: 'calc(100vh - 200px)',
      selectionList: []
    };
  },
  watch: {
    // 当父组件该数据发生变化，子组件需要监听其变化重新赋值
    tableData: {
      handler(newVal, oldVal) {
        this.list = newVal;
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    handleSelection(status) {
      this.selectionList = status;
      console.log(this.selectionList);
    },
    handleSelectAll(status) {
      this.$refs.selection.selectAll(status);
    }
  }
};
</script>

<style>
</style>
